import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Row, Col, Tabs, Button, Tag, Rate, Divider } from 'antd';
import { EnvironmentOutlined, PhoneOutlined, ClockCircleOutlined } from '@ant-design/icons';
import '../styles/CinemaDetail.css';

const { TabPane } = Tabs;

const CinemaDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [cinema, setCinema] = useState(null);
  const [screenings, setScreenings] = useState([]);

  useEffect(() => {
    // 模拟获取影院数据
    const mockCinema = {
      id: id,
      name: '万达影城（宁工店）',
      address: '宁波市江北区风华路201号',
      phone: '400-123-4567',
      rating: 4.5,
      facilities: ['IMAX', '杜比全景声', '3D', '4D'],
      businessHours: '09:00-24:00',
      description: '万达影城是万达集团旗下高端影院品牌，提供优质的观影体验。',
      imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.2e00077e35b4faef430e1a98ebe74fc8?rik=kNoajehVXUO%2bPg&riu=http%3a%2f%2fnews.winshang.com%2fmember%2fFCK%2f2019%2f7%2f5%2f201975144310452554x.jpg&ehk=o1OSmXurShc9j2OTE1Pk6rXq1%2fuXiHsjK4LpnSfBSm4%3d&risl=&pid=ImgRaw&r=0',
      hallImages: [
        'https://big.justeasy.cn/effect/201708/20170824115617_599e4e61e7b82.jpg',
        'https://ts1.tc.mm.bing.net/th/id/R-C.59bc493cfb7df7afc12499d45687af19?rik=nU3PJxbVmxCrAQ&riu=http%3a%2f%2fhdhivi.com%2fUploads%2f2018-11-05%2f5bdfe1807e3a7.jpg&ehk=R9bOkEqRIFnl03pVXNxj5ayWoRsth9M27f0r%2f8p6hEY%3d&risl=&pid=ImgRaw&r=0',
        'https://huacheng.gz-cmc.com/upload/news/image/2023/06/30/817e4fadd6b34ff5b26a34dd509a8124.png'
      ],
      mapImageUrl: 'https://xqimg.imedao.com/17669fd9ff03fe73fdcb0af5.png!800.jpg',
      halls: [
        { id: 1, name: '1号厅', type: 'IMAX', seats: 200 },
        { id: 2, name: '2号厅', type: '普通厅', seats: 150 },
        { id: 3, name: '3号厅', type: 'VIP厅', seats: 100 }
      ]
    };

    // 模拟获取排片数据
    const mockScreenings = [
      {
        id: 1,
        movie: {
          title: '流浪地球2',
          duration: '173分钟',
          type: '科幻/冒险'
        },
        hall: '1号厅',
        time: '2024-03-06 14:30',
        price: 45.00,
        availableSeats: 120
      },
      {
        id: 2,
        movie: {
          title: '满江红',
          duration: '159分钟',
          type: '悬疑/剧情'
        },
        hall: '2号厅',
        time: '2024-03-06 15:00',
        price: 38.00,
        availableSeats: 80
      }
    ];

    setCinema(mockCinema);
    setScreenings(mockScreenings);
  }, [id]);

  const handleSelectSeats = (screeningId) => {
    navigate(`/screening/${screeningId}/select-seats`);
  };

  if (!cinema) {
    return <div>Loading...</div>;
  }

  return (
    <div className="cinema-detail">
      <Card className="cinema-info">
        <Row gutter={24}>
          <Col span={24} className="cinema-banner">
            <img 
              src={cinema.imageUrl} 
              alt={cinema.name}
              style={{ width: '100%', height: '300px', objectFit: 'cover', marginBottom: '24px' }}
            />
          </Col>
          <Col span={18}>
            <h1>{cinema.name}</h1>
            <div className="cinema-rating">
              <Rate disabled defaultValue={cinema.rating} />
              <span className="rating-text">{cinema.rating}分</span>
            </div>
            <div className="cinema-address">
              <EnvironmentOutlined />
              <span>{cinema.address}</span>
            </div>
            <div className="cinema-phone">
              <PhoneOutlined />
              <span>{cinema.phone}</span>
            </div>
            <div className="cinema-hours">
              <ClockCircleOutlined />
              <span>营业时间：{cinema.businessHours}</span>
            </div>
            <div className="cinema-facilities">
              {cinema.facilities.map((facility, index) => (
                <Tag key={index} color="blue">{facility}</Tag>
              ))}
            </div>
          </Col>
          <Col span={6}>
            <div className="cinema-map">
              <img 
                src={cinema.mapImageUrl} 
                alt="影院位置" 
                style={{ 
                  width: '100%', 
                  height: '200px', 
                  objectFit: 'cover',
                  borderRadius: '8px',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                }}
              />
            </div>
          </Col>
        </Row>
      </Card>

      <Divider />

      <Tabs defaultActiveKey="1">
        <TabPane tab="今日排片" key="1">
          <div className="screening-list">
            {screenings.map(screening => (
              <Card key={screening.id} className="screening-card">
                <Row gutter={16}>
                  <Col span={6}>
                    <div className="screening-time">
                      <div className="time">{screening.time.split(' ')[1]}</div>
                      <div className="date">{screening.time.split(' ')[0]}</div>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="screening-info">
                      <h3>{screening.movie.title}</h3>
                      <div className="movie-info">
                        <span>{screening.movie.duration}</span>
                        <span>{screening.movie.type}</span>
                      </div>
                      <div className="hall-info">
                        <span>{screening.hall}</span>
                        <span>剩余{screening.availableSeats}座</span>
                      </div>
                    </div>
                  </Col>
                  <Col span={6}>
                    <div className="screening-action">
                      <div className="price">¥{screening.price}</div>
                      <Button 
                        type="primary" 
                        size="large"
                        onClick={() => handleSelectSeats(screening.id)}
                      >
                        选座购票
                      </Button>
                    </div>
                  </Col>
                </Row>
              </Card>
            ))}
          </div>
        </TabPane>
        <TabPane tab="影厅信息" key="2">
          <div className="hall-list">
            <Row gutter={[16, 16]}>
              {cinema.halls.map((hall, index) => (
                <Col span={8} key={hall.id}>
                  <Card 
                    className="hall-card"
                    cover={
                      <img
                        alt={hall.name}
                        src={cinema.hallImages[index]}
                        style={{ height: 200, objectFit: 'cover' }}
                      />
                    }
                  >
                    <h3>{hall.name}</h3>
                    <div className="hall-info">
                      <Tag color="blue">{hall.type}</Tag>
                      <span>座位数：{hall.seats}</span>
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        </TabPane>
        <TabPane tab="影院介绍" key="3">
          <div className="cinema-description">
            <p>{cinema.description}</p>
          </div>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default CinemaDetail; 